<template>
  <div>
     <van-nav-bar title="图文资讯" left-text="返回" left-arrow
      @click-left="$router.back()"
      >
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>
 <van-tabs  v-model="active">
  <van-tab  v-for="item in list"
  :key="item.id"
 :title="item.title"
 
  >
  <div class="div2">
    
  <van-image 
  v-for="item2 in item.newsList"
  :key="item2.id"
  :src="item2.img_url"
  @click="$router.push({path :`/layout/mytupianxiang/${item2.id}`})"
  cover
  width="100%"
height="50%"
  class="imgs"
  >
  <h2>{{item2.title}}</h2>
  <p>{{item2.zhaiyao}}</p>
  </van-image>
  </div>

 
  </van-tab>
 

 
</van-tabs>
<!-- 通用错误  v-if="!item.list.length"-->
<van-empty  description="没有数据" />
  </div>
</template>

<script>
import {getnewsListData,getimagesData} from '../../apis/api'
export default {
data () {
  return {
    list:[],
    active:0,
    
  }
},
async created () {
  const res = await getnewsListData()
  console.log(res);
  this.list=res.message
  this.list.unshift({id:0,title:"全部"})
  this.list=this.list.map((item)=>{
    return {...item,newsList:[]}
  })
    this.getPostlistdata()
},
methods: {
  async getPostlistdata(){
 const {id} = this.list[this.active]
 const res2 = await getimagesData(id)
 console.log(res2);
 this.list[this.active].newsList.push(
   ...res2.message
 )
 console.log(this.list);

}
}

}
</script>

<style lang="less" scoped>
h2{
 position: absolute;
 bottom: 73px;
  font-size: 15px;
  color: #fff;
  // height: 30px;
}
p{
  position: absolute;
  bottom: -13px;
  font-size: 15px;
  color: #fff;
    text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  
  
  -webkit-box-orient: vertical;
}

</style>